<template>
  <div class="icons">
    <swiper :options="swiperOptionicon">
      <!-- slides -->
      <swiper-slide v-for="(page,index) of iconlistpage" :key="index">
        <div class="icon" v-for="(item) of page" :key="item.id">
          <div class="icon-img">
            <img class="icon-img-content"
                 :src="item.imgUrl"
                 alt="景点门票" style="opacity: 1;">
          </div>
          <p class="icon-desc"> {{item.desc}} </p>
        </div>
      </swiper-slide>
      <!-- Optional controls 专门用来显示轮播的页码的-->
      <!--<div class="swiper-pagination-icon"  slot="pagination">xxxx</div>-->
    </swiper>

  </div>
</template>
<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  /*  这里面是为了多个左滑和右划。。因为轮播的效果是封装在swiper-container里面的  */
  .icons >>> .swiper-container
    width :100%
    height: 0
    overeflow:hidden
    /*  这种写法很重要   */
    padding-bottom :50%
    /*background :green*/
  .icons >>> .swiper-pagination-bullet-active
    background: red !important
  .icons
    margin-top :.2rem
    .icon
      /* 这里用了子绝父相  */
      position:relative
      float: left
      /*height: 0*/
      width :25%
      overeflow:hidden
      /*background :red*/
      padding-bottom :25%
      .icon-img
        width :100%
        position :absolute
        top:0
        left :0
        right :0
        bottom :.44rem
        /*  这是使盒子宽度不超过25%  */
        box-sizing :border-box
        /*  这个是用来调整间距的 */
        padding :.1rem
        /*background: #25a4bb*/
        .icon-img-content
          height :100%
          /*  自动居中  */
          margin:0 auto
          display :block
      .icon-desc
        position :absolute
        left :0
        right :0
        bottom :0
        height :.44rem
        line-height :.44rem
        color: $darkTextColor
        text-align :center

</style>
<script>
export default {
  name: 'HomeIcons',
  data () {
    return {
      swiperOptionicon: {
        pagination: '.swiper-pagination-icon',
        //  循环轮播。。注意不是定时轮播，是循环轮播
        loop: true
      },
      iconList2: [
        {
          id: 5,
          desc: '全部玩乐',
          imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/80/416c6ab3368d1f02.png'
        },
        {
          id: 1,
          desc: '景点门票',
          imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png'
        },
        {
          id: 3,
          desc: '一日游',
          imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png'
        },
        {
          id: 4,
          desc: '自然风光',
          imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/96/c70f1e85ae4a4f02.png'
        },
        {
          id: 2,
          desc: '踏青赏花',
          imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/bd/9f7b9b2b60c1502.png'
        }
      ]
    }
  },
  props:{
    iconList:{
      type:Array
    }
  },
  computed: {
    //   把一维数组拆分成为二维数组
    iconlistpage: function () {
      const pages = []
      //  对数组进行切片
      this.iconList.forEach((item, index) => {
        // 向下取整
        const page = Math.floor(index / 5)
        // 初始化新的一页
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }
}
</script>
